<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9TPG3QH67K"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9TPG3QH67K');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系我 - 个人网站</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      color: #333;
      line-height: 1.6;
      padding: 20px;
      position: relative;
      overflow-x: hidden;
      min-height: 100vh;
      background: linear-gradient(135deg, #1a2a6c, #2a5298);
    }

    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .container {
      max-width: 1000px;
      margin: 40px auto;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
      padding: 40px;
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.4);
    }

    header {
      text-align: center;
      margin-bottom: 40px;
      padding-bottom: 25px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    h1 {
      font-size: 2.8rem;
      color: #2c3e50;
      margin-bottom: 15px;
      font-weight: 700;
    }

    .subtitle {
      font-size: 1.3rem;
      color: #7f8c8d;
      font-weight: 400;
    }

    .contact-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }

    .contact-info, .contact-form {
      padding: 20px;
    }

    .section-title {
      font-size: 1.8rem;
      color: #2c3e50;
      margin-bottom: 25px;
      padding-bottom: 10px;
      border-bottom: 2px solid #3498db;
      display: inline-block;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30px;
      transition: transform 0.3s;
    }

    .info-item:hover {
      transform: translateX(5px);
    }

    .info-icon {
      font-size: 1.6rem;
      color: #3498db;
      margin-right: 20px;
      min-width: 40px;
      text-align: center;
      background: rgba(52, 152, 219, 0.1);
      padding: 12px;
      border-radius: 50%;
    }

    .info-details h3 {
      margin-bottom: 8px;
      color: #2c3e50;
      font-size: 1.2rem;
    }

    .info-details p,
    .info-details a {
      color: #5a6c7d;
      text-decoration: none;
      transition: color 0.3s;
      font-size: 1.05rem;
    }

    .info-details a:hover {
      color: #3498db;
      text-decoration: underline;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #2c3e50;
      font-size: 1.1rem;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 1rem;
      transition: all 0.3s;
      background: rgba(255, 255, 255, 0.8);
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .form-group textarea {
      min-height: 180px;
      resize: vertical;
    }

    .btn {
      background: #3498db;
      color: white;
      border: none;
      padding: 15px 35px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 500;
      transition: all 0.3s;
      display: inline-block;
      box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
    }

    .btn:hover {
      background: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(52, 152, 219, 0.4);
    }

    .btn:active {
      transform: translateY(0);
    }

    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 30px;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background: #3498db;
      color: white;
      border-radius: 50%;
      text-decoration: none;
      transition: all 0.3s;
      font-size: 1.3rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .social-link:hover {
      transform: translateY(-5px) scale(1.1);
      background: #2980b9;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

    footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 25px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      color: #7f8c8d;
      font-size: 1rem;
    }

    @media (max-width: 900px) {
      .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .container {
        margin: 20px auto;
        padding: 25px;
      }

      h1 {
        font-size: 2.2rem;
      }

      .subtitle {
        font-size: 1.1rem;
      }
    }

    @media (max-width: 480px) {
      .container {
        padding: 20px 15px;
        margin: 15px auto;
      }

      h1 {
        font-size: 1.9rem;
      }

      .info-item {
        flex-direction: column;
        text-align: center;
      }

      .info-icon {
        margin-right: 0;
        margin-bottom: 15px;
      }

      .social-links {
        justify-content: center;
      }
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .container {
      animation: fadeIn 0.8s ease-out;
    }
  </style>
</head>
<body>
  <!-- 背景粒子效果 -->
  <div id="particles-js"></div>

  <div class="container">
    <header>
      <h1>联系我</h1>
      <p class="subtitle">很高兴您能来访，期待与您交流</p>
    </header>

    <div class="contact-content">
      <div class="contact-info">
        <h2 class="section-title">联系信息</h2>
        <div class="info-item">
          <div class="info-icon">
            <i class="fas fa-map-marker-alt"></i>
          </div>
          <div class="info-details">
            <h3>地址</h3>
            <p>中国</p>
          </div>
        </div>

        <div class="info-item">
          <div class="info-icon">
            <i class="fas fa-envelope"></i>
          </div>
          <div class="info-details">
            <h3>邮箱</h3>
            <p>zczaya@163.com</p>
          </div>
        </div>

        <div class="info-item">
          <div class="info-icon">
            <i class="fas fa-globe"></i>
          </div>
          <div class="info-details">
            <h3>网站</h3>
            <a href="/">个人网站</a>
          </div>
        </div>

        <div class="social-links">
          <a href="#" class="social-link">
            <i class="fab fa-github"></i>
          </a>
          <a href="#" class="social-link">
            <i class="fab fa-weibo"></i>
          </a>
          <a href="#" class="social-link">
            <i class="fab fa-weixin"></i>
          </a>
        </div>
      </div>

      <div class="contact-form">
        <h2 class="section-title">发送消息</h2>
        <form id="contactForm">
          <div class="form-group">
            <label for="name">您的姓名</label>
            <input type="text" id="name" placeholder="请输入您的姓名" required>
          </div>

          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" placeholder="请输入您的邮箱" required>
          </div>

          <div class="form-group">
            <label for="message">您的消息</label>
            <textarea id="message" placeholder="请输入您想说的话..." required></textarea>
          </div>

          <button type="submit" class="btn">发送消息</button>
        </form>
      </div>
    </div>

    <footer>
      <p>&copy; 2025 个人网站. 保留所有权利.</p>
    </footer>
  </div>

  <!-- 粒子背景效果脚本 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script>
    // 初始化粒子背景
    document.addEventListener('DOMContentLoaded', function() {
      if (typeof particlesJS !== 'undefined') {
        particlesJS('particles-js', {
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: '#ffffff'
            },
            shape: {
              type: 'circle'
            },
            opacity: {
              value: 0.5,
              random: true
            },
            size: {
              value: 3,
              random: true
            },
            line_linked: {
              enable: true,
              distance: 150,
              color: '#ffffff',
              opacity: 0.4,
              width: 1
            },
            move: {
              enable: true,
              speed: 2,
              direction: 'none',
              random: true,
              straight: false,
              out_mode: 'out',
              bounce: false
            }
          },
          interactivity: {
            detect_on: 'canvas',
            events: {
              onhover: {
                enable: true,
                mode: 'grab'
              },
              onclick: {
                enable: true,
                mode: 'push'
              },
              resize: true
            },
            modes: {
              grab: {
                distance: 140,
                line_linked: {
                  opacity: 1
                }
              },
              push: {
                particles_nb: 4
              }
            }
          },
          retina_detect: true
        });
      }

      // 表单提交处理
      const contactForm = document.getElementById('contactForm');
      if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
          e.preventDefault();

          // 获取表单数据
          const name = document.getElementById('name').value;
          const email = document.getElementById('email').value;
          const message = document.getElementById('message').value;

          // 简单验证
          if (!name || !email || !message) {
            alert('请填写所有必填字段');
            return;
          }

          // 模拟发送成功
          alert(`感谢您的消息，${name}！我们会尽快回复您。`);
          contactForm.reset();
        });
      }
    });
  </script>
</body>
</html>